<template>
    <template v-for="item in  props.menuList">
        <!-- 如果当前菜单有下级,循环下级 -->
        <el-sub-menu v-if="item.children && item?.children.length > 0" :index="item.path">
            <template #title>
                <el-icon class="menu-icon">
                    <!-- 遍历icon -->
                    <!-- <component :is="item?.icon"></component> -->
                </el-icon>
                <span>{{ item?.label }}</span>
            </template>

            <!-- 递归调用自身 -->
            <MenuItem :menuList="item.children">
            </MenuItem>
        </el-sub-menu>

        <!-- 没有下级 -->
        <el-menu-item v-else :index="item.path">
            <!-- <component :is="item?.icon" class="menu-icon"></component> -->
            <template #title>{{ item?.label }}</template>
        </el-menu-item>
    </template>
</template>
  
 
  
<script lang="ts" setup>
import { onMounted } from 'vue';
import { Document, Menu as IconMenu, Location, Setting, } from '@element-plus/icons-vue'
import MenuItem from '@/components/sideMenu/menuItem.vue'
interface SidebarItem {
    path: string
    label: string
    children?: SidebarItem[]
}

const props = defineProps<{
    menuList: Array<SidebarItem>
}>()


</script>


<style lang="scss">
.el-menu-vertical-demo:not(.el-menu--collapse) {
    min-width: 200px;
    // min-height: 400px;
}

.menu-icon {
    width: 24px;
    height: 24px;
}
</style>
  


  